<style>
    :root {
        --color1: #E63946;
        --color2: #457B9D;
        --color3: #1D3557;
        --color4: #F1FAEE;
        --color5: #A8DADC;
        --color6: #6B7280;
        --color7: #8B5CF6;
        --color8: #EC4899;
        --color9: #10B981;
        --color10: #F59E0B;
    }

    body {
        font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
        background-color: #f9fafb;
        padding: 3rem 0;
    }

    .section-header {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 1rem;
        position: relative;
    }

    .section-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background-color: var(--color2);
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2rem;
        margin-bottom: 4rem;
    }

    /*** logo 基础样式 ***/
    .logo-card {
        background: white;
        border-radius: 12px;
        padding: 2rem 1.5rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .logo-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    }

    .logo-card .logo-holder {
        width: 150px;
        height: 150px;
        margin: 0 auto 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }

    .logo-card .logo-holder.square {
        border-radius: 16px;
    }

    .logo-card .logo-holder.hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }


    .logo-card .logo-text {
        font-size: 3rem;
        font-weight: 700;
        color: white;
        line-height: 1;
    }

    .logo-card .logo-icon {
        font-size: 4rem;
        color: white;
    }

    .logo-card .logo-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .logo-card .logo-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #111827;
    }

    .logo-card .logo-desc {
        font-size: 0.9rem;
        color: #6B7280;
        line-height: 1.6;
        flex-grow: 1;
    }

    /* 颜色样式 */
    .c1 {
        background: linear-gradient(135deg, var(--color1), #D62828);
    }

    .c2 {
        background: linear-gradient(135deg, var(--color2), #3A7CA5);
    }

    .c3 {
        background: linear-gradient(135deg, var(--color3), #16213E);
    }

    .c4 {
        background: linear-gradient(135deg, var(--color5), #90E0EF);
    }

    .c5 {
        background: linear-gradient(135deg, var(--color7), #7C3AED);
    }

    .c6 {
        background: linear-gradient(135deg, var(--color8), #BE185D);
    }

    .c7 {
        background: linear-gradient(135deg, var(--color9), #059669);
    }

    .c8 {
        background: linear-gradient(135deg, var(--color10), #D97706);
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .logo-card .logo-holder {
            width: 120px;
            height: 120px;
        }

        .logo-card .logo-text {
            font-size: 2.2rem;
        }

        .logo-card .logo-icon {
            font-size: 3rem;
        }
    }
</style>

<div class="container">
    <h2 class="section-header">中文元素社交logo</h2>
    <div class="logo-grid">
        <!-- 中文logo 1 -->
        <div class="logo-card">
            <div class="logo-holder c2">
                <span class="logo-text">友</span>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">友邻社交</h3>
                <p class="logo-desc">以"友"字为核心，体现邻里友好、互助社交的理念</p>
            </div>
        </div>

        <!-- 中文logo 2 -->
        <div class="logo-card">
            <div class="logo-holder square c7">
                <span class="logo-text">聊</span>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">闲聊圈</h3>
                <p class="logo-desc">突出"聊"字，强调轻松交流、自由表达的社交氛围</p>
            </div>
        </div>

        <!-- 中文logo 3 -->
        <div class="logo-card">
            <div class="logo-holder c5">
                <span class="logo-text">聚</span>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">聚友网</h3>
                <p class="logo-desc">"聚"字设计象征人脉汇聚、兴趣相聚的社交平台</p>
            </div>
        </div>

        <!-- 中文logo 4 -->
        <div class="logo-card">
            <div class="logo-holder hexagon c8">
                <span class="logo-text">知</span>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">知行者</h3>
                <p class="logo-desc">以"知"为核心，打造知识分享与交流的社交社区</p>
            </div>
        </div>
    </div>

    <h2 class="section-header">动物元素社交logo</h2>
    <div class="logo-grid">
        <!-- 动物logo 1 -->
        <div class="logo-card">
            <div class="logo-holder c2">
                <i class="fas fa-dove logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">白鸽传书</h3>
                <p class="logo-desc">白鸽象征和平与传递，代表真诚沟通的社交理念</p>
            </div>
        </div>

        <!-- 动物logo 2 -->
        <div class="logo-card">
            <div class="logo-holder c6">
                <i class="fas fa-cat logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">喵星部落</h3>
                <p class="logo-desc">以猫为元素，面向宠物爱好者的兴趣社交平台</p>
            </div>
        </div>

        <!-- 动物logo 3 -->
        <div class="logo-card">
            <div class="logo-holder square c3">
                <i class="fas fa-fish logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">鱼群社交</h3>
                <p class="logo-desc">鱼群象征群体归属感，代表互助共生的社交网络</p>
            </div>
        </div>

        <!-- 动物logo 4 -->
        <div class="logo-card">
            <div class="logo-holder hexagon c1">
                <i class="fas fa-paw logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">萌宠圈</h3>
                <p class="logo-desc">以动物爪印为元素，连接宠物爱好者的社交平台</p>
            </div>
        </div>
    </div>

    <h2 class="section-header">植物元素社交logo</h2>
    <div class="logo-grid">
        <!-- 植物logo 1 -->
        <div class="logo-card">
            <div class="logo-holder c7">
                <i class="fas fa-seedling logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">萌芽社区</h3>
                <p class="logo-desc">幼苗象征成长与希望，代表共同进步的社交理念</p>
            </div>
        </div>

        <!-- 植物logo 2 -->
        <div class="logo-card">
            <div class="logo-holder square c4">
                <i class="fas fa-leaf logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">绿叶社交</h3>
                <p class="logo-desc">绿叶元素体现自然、健康的社交生态与生活方式</p>
            </div>
        </div>

        <!-- 植物logo 3 -->
        <div class="logo-card">
            <div class="logo-holder c8">
                <i class="fas fa-sunflower logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">向阳圈</h3>
                <p class="logo-desc">向日葵象征积极向上，打造正能量社交社区</p>
            </div>
        </div>

        <!-- 植物logo 4 -->
        <div class="logo-card">
            <div class="logo-holder hexagon c5">
                <i class="fas fa-pagelines logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">草木集</h3>
                <p class="logo-desc">以草木为元素，连接自然爱好者的兴趣社交平台</p>
            </div>
        </div>
    </div>

    <h2 class="section-header">实物元素社交logo</h2>
    <div class="logo-grid">
        <!-- 实物logo 1 -->
        <div class="logo-card">
            <div class="logo-holder c2">
                <i class="fas fa-paper-plane logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">纸飞机</h3>
                <p class="logo-desc">纸飞机象征消息传递，打造轻松有趣的社交体验</p>
            </div>
        </div>

        <!-- 实物logo 2 -->
        <div class="logo-card">
            <div class="logo-holder square c1">
                <i class="fas fa-coffee logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">咖啡时光</h3>
                <p class="logo-desc">咖啡杯元素代表休闲聚会，连接志同道合的朋友</p>
            </div>
        </div>

        <!-- 实物logo 3 -->
        <div class="logo-card">
            <div class="logo-holder c6">
                <i class="fas fa-camera logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">瞬间</h3>
                <p class="logo-desc">相机元素突出记录与分享，连接生活瞬间的社交平台</p>
            </div>
        </div>

        <!-- 实物logo 4 -->
        <div class="logo-card">
            <div class="logo-holder hexagon c3">
                <i class="fas fa-book logo-icon"></i>
            </div>
            <div class="logo-info">
                <h3 class="logo-title">书语</h3>
                <p class="logo-desc">书本元素代表知识交流，连接阅读爱好者的社交社区</p>
            </div>
        </div>
    </div>
</div>
    

